<form class="form-horizontal">
    <div class="form-group form-inline">
        <span class="control-label width-85">商品编号</span>
        <input type="text" class="form-control" style="width: 300px;" [(ngModel)]="condition.suGuid" name="suGuid"
            placeholder="商品编号">
    </div>
    <div class="form-group form-inline">
        <span class="control-label width-85">充值档金额</span>
        <input type="text" class="form-control" [(ngModel)]="condition.amount" name="amount" placeholder="充值档金额">
    </div>
    <div class="form-group form-inline">
        <span class="control-label width-85">排序</span>
        <input type="text" class="form-control" [(ngModel)]="condition.displayIndex" name="amount" placeholder="排序">
    </div>
    <div class="form-group">
        <span class="control-label width-85">送券配置</span>
    </div>
    <div class="form-group">
        <div class="col-md-12">
            <div class="panel panel-default black-color">
                <div class="panel-body">
                    <div class="row-header">
                        <div class="row-input" style="width: 12%;">券id</div>
                        <div class="row-input" style="width: 31%;">名称</div>
                        <div class="row-input" style="width: 8%;">数量</div>
                        <div class="row-input" style="width: 34%;">前台显示名称</div>
                        <div class="row-input"></div>
                    </div>
                    <div class="row" *ngFor="let row of rows; let i = index">
                        <div class="row-input" style="width: 12%;">
                            <input type="text" class="form-control" (change)="showName(row.couponId, i)" [(ngModel)]="row.couponId" id="id{{i}}" name="id{{i}}"
                                required>
                        </div>
                        <div class="row-input" style="width: 31%;">
                            <input type="text" class="form-control" [(ngModel)]="row.name" name="name{{i}}" id="name{{i}}{{i}}" readonly>
                        </div>
                        <div class="row-input" style="width: 8%;">
                            <input type="text" class="form-control" [(ngModel)]="row.count" name="count{{i}}" required>
                        </div>
                        <div class="row-input" style="width: 34%;">
                            <input type="text" class="form-control" [(ngModel)]="row.displayName" name="displayName{{i}}" required>
                        </div>
                        <div class="row-btn">
                            <button class="btn btn-danger" (click)="delPrePaid(row.couponId)">删除</button>
                        </div>
                    </div>
                    <div class="row-add">
                        <button class='action-btn' (click)="addNewPrePaid()">添加一行</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="form-group form-inline">
        <span class="control-label prepaid-voucher-label">礼包前台显示文字</span>
        <input type="text" class="form-control" id="txtDisplayAmount" [(ngModel)]="condition.displayAmount" name="displayAmount"
            placeholder="前台显示礼包总额">
    </div>
    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <button type="submit" class="confirm-btn" (click)="saveAdd()">确定添加</button>
        </div>
    </div>
</form>